<template>
  <div class="resource container">
    <div class="search-box">
      <el-row :gutter="20">
        <el-form label-width="100px" size="small" class="searchForm">
          <el-col :span="6">
            <el-form-item label="选择年月:">
             <el-date-picker
                v-model="params.strdate"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                @change="search"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择币种:">
              <el-select
                v-model="params.currency"
                placeholder="请选择币种"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in moneyList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              @click="search"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >搜索</el-button
            >
            <el-button
              @click="cancelData"
              icon="el-icon-refresh"
              size="mini"
              type="warning"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div>
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="exchangeDate"
          label="当前月份"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="当前币种" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ money_Type(scope.row.currency) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="汇率比例(1美元兑换当前币种金额)" min-width="150" align="center" prop="exchange">
        </el-table-column>
        <el-table-column label="修改时间" align="center" min-width="150">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="180"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="1000px">
      <el-form
        :rules="rules2"
        ref="zhiyuanRuleForm"
        :model="formData"
        label-width="120px"
        size="small"
        class="form-box"
      >
          <el-col :span="8">
            <el-form-item label="选择年月" prop="exchangeDate">
              <el-date-picker
                v-model="formData.exchangeDate"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择币种" prop="currency">
              <el-select v-model="formData.currency" placeholder="请选择币种">
                <el-option
                  v-for="item in moneyList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="汇率" prop="exchange">
              <el-input v-model="formData.exchange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="small">取消</el-button>
        <el-button @click="submitForm()" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { listUser } from "@/api/system/user";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { getList,add,update } from "@/api/systemSettings/exchangeRate"

export default {
  components: {  },
  props: [],
  data() {
    return {
      moneyList:[
        {
          id: "0",
          title: "美元$"
        },
        {
          id: "1",
          title: "人民币￥"
        },
        {
          id: "2",
          title: "欧元€"
        }
      ],

      countryList:[],
      labels: [],
      applyListData888: [],
      // pageNum888:1,
      // todelpage888:0,
      uploadList: [],
      label: "",
      uploading: false,
      uploadFile666: {},
      dialogVisible555: false,
      // 记录
      corporateNameTitle: "",
      logDialogVisible: false,
      title666: "",
      rules2: {
        exchangeDate: [
          { required: true, message: "请选择年月", trigger: "blur" },
        ],
        currency: [
          { required: true, message: "请选择币种", trigger: "blur" },
        ],
        exchange: [
          { required: true, message: "请输入1美元兑换当前币种金额", trigger: "blur" },
        ]
      },
     
      openFlag: true,
      addVisible: false,
      loading: true,
      show: false,
      //数据
      tableData: [],
      tableData1: [],
      add: false,
      delet: false,
      get: false,
      update: false,
      batch: false,
      params: {
        strdate: '',
        currency: ''
      },
      pageTotal: 0,
      pageTotal1: 0,
      dialogVisible: false, // 是否展示编辑页面
      //删除
      multipleSelection: [],
      multipleSelection1: [],
      delList: [],
      // 新增/编辑数据
      formData: {
        userId: 0
      },
      customer: {
        customerId: ""
      },
      dialogStatus: 0,
      //资质查看
      viewDialogVisible: false,

      //用户id
      adminId: "",
      stateList: [
        {
          id: 1,
          title: "已合作"
        },
        {
          id: 2,
          title: "有意向"
        },
        {
          id: 3,
          title: "待开发"
        }
      ],
      typeList: [
        {
          id: "0",
          title: "未知"
        },
        {
          id: "1",
          title: "新客户"
        },
        {
          id: "2",
          title: "老客户"
        }
      ],
      customerRoleList: [],
      levelList: [],
      levelList5: [],
      qccQuery: [
        {
          id: true,
          title: "已查"
        },
        {
          id: false,
          title: "未查"
        }
      ],
      //资质添加
      setValue: [],
      paramsFlag: 0,
      editFlags: false,
      applyVisible: false,
      sysUserList: [],
      applyData: {
        // sourceUid:JSON.parse( localStorage.getItem('adminData') ).id,
        type: 1,
        targetUid: "",
        ids: "",
        reason: ""
      },
      // 转移人员
      transferPeopleParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: "",
        grade: ""
      },
      options: [],
      // 控制批量删除按钮
      isOperate: true
    };
  },
  computed: {},
  created() {
    this.getData00();
  },
  mounted() {
  },
  watch: {},
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        var _this = this;
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          const condition =
            this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  methods: {
    checkPermi,
    checkRole,


    money_Type(e){
      var str = this.moneyList.find(function(item) {
          return (item.id == e);
      });
      if (str) return str.title
    },
    
    submitForm() {
      console.log(this.formData, "提交的客户资源-------");
      this.$refs["zhiyuanRuleForm"].validate(valid => {
        if (valid) {
          if (this.title666 == "新增") {
            add(this.formData).then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success(`保存成功`);
                this.dialogVisible = false;
                this.getData00();
                this.formData = {};
              }
            });
          } else {
            update(this.formData).then(res => {
              if (res.code == 200) {
                this.$message.success(`修改成功`);
                this.dialogVisible = false;
                this.uploading = false;
                this.getData00();
                this.formData = {};
              }
            });
          }
        }
      });
    },


    handleAdd() {
      this.dialogVisible = true;
      this.title666 = "新增";
      this.formData = {};
    },
    handleEdit(index, row) {
      this.formData = row;
      this.dialogVisible = true;
      this.title666 = "修改";
    },
    cancel(){
      this.dialogVisible = false;
      this.getData00();
    },
    //编辑页面弹窗
    closeDialog() {
      this.dialogVisible = false;
    },

    //获取数据
    getData00() {
      var _this = this;
      let data = this.params;
      this.loading = false;
      getList(data)
        .then(res => {
          if (res.code == "200") {
            this.tableData = res.rows;
            this.pageTotal = res.total;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    getData1() {
      var _this = this;
      let data = this.params;
      getData00(data)
        .then(res => {
          if (res.code == "200") {

            this.tableData1 = res.rows;
            this.pageTotal1 = res.total;
            // this.add = res.data.add;
            // this.delet = res.data.delete;
            // this.update = res.data.update;
            // this.get = res.data.get;
            // this.batch = res.data.batch;
            // this.show = res.data.show;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },

    //获取资源到个人的客户管理
    getSharedCustomer(index, row) {
      var _this = this;
      this.customer.customerId = row.id;
      getSharedCustomer(this.customer)
        .then(res => {
          if (res.code == "200") {
            this.$message.success(`${res.message}`);
            this.getData00();
          } else {
            this.$message.error(`${res.message}`);
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    // 触发搜索按钮
    /* handleSearch() {
      this.$set(this.params, "page", 1);
      this.getData00();
    }, */
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    },
    cancelData(){
      this.params = {
        strdate: '',
        currency: ''
      }
    },
    handleSearchOpen() {
      this.addVisible = true;
      this.params = {
        userId: 0,
        pageNum: 1,
        pageSize: 10,
        companyName: "",
        customerPhone: "",
        grade: "",
        customerName: "",
        label: "",
        address: "",
        source: "",
        customerRole: null,
        customerType: null
      };
    },
    handleSearch() {
      this.addVisible = false;
      this.paramsFlag = 1;
      this.$set(this.params, "pageNum", 1);
      this.getData00();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getData00();
    },
    // 分页导航
    handlePageChange1(val) {
      this.$set(this.params, "pageNum", val);
      this.getData1();
    }
  }
};
</script>

<style>
.timeDate .el-date-editor {
  width: 50%;
  float: left;
}
</style>
<style scoped>
.container {
  padding: 5px 20px !important;
}
.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.search-box {
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
/* .search-box .el-input {
  width: 200px;
  margin-right: 10px;
} */
</style>
